<template>
<div class="wrap">
<header>
  <router-link to="/account" class="x">
      X
  </router-link>
    </header>
    <section>
        <p class="tp"><img src="kk.jpg" alt=""></p>
        <p class="log">登录/注册</p>
        <van-field
  center
  clearable
  label="手机号"
  placeholder="请输入手机号"
  ref="phonenumber"
>
</van-field>
        <van-field
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
  ref="yanzheng"
>
  <template #button>
    <van-button size="small" type="primary" @click="yanzheng()">发送验证码</van-button>
  </template>
</van-field>
        
        <div class="phone">
            <div class="logn">
              <button @click="login()">本机号码一键登录</button>
            </div>
            <div class="lg">
              <button @click="zm()">账号密码登录</button>
            </div>
            <span class="quest">遇到问题</span>
        </div>
    </section>
    <footer>
      <div class="foot">
          <span><img src="kkk_03.jpg" alt=""></span>
          <span><img src="kkk_05.jpg" alt=""></span>
          <span><img src="kkk_07.jpg" alt=""></span>
          <span><img src="kkk_09.jpg" alt=""></span>


      </div>
      <div class="end">
          <p>登录即表示您同意
            <span>《中国移动服务认证服务条款》</span>和<br>
            <span>《慕课网注册协议》、《隐私政策》</span>
          </p>
      </div>
    </footer>
    </div>
</template>

<script>
import {postdatalink} from "@/api/postapi.js"
import {getlink} from "@/api/getapi.js"
export default {
methods:{
  login(){
  let usp=new URLSearchParams()
    usp.append("phone",this.$refs.phonenumber.value);
    usp.append("user_code",this.$refs.yanzheng.value);
    console.log(this.$refs.phonenumber.value);
    console.log(this.$refs.yanzheng.value);
       postdatalink("/api/login/",usp).then((ok)=>{
         console.log(ok)
          if(ok.data.msg == "登录成功"){
              alert("登录成功")
            localStorage.setItem("token",JSON.stringify(ok))
            this.$router.push("/myhome");
          }else{
              alert("登录失败请重新登录")
          }
       }) 
  },
  yanzheng(){
    let a="/api/smscode/?phone="+this.$refs.phonenumber.value;
       getlink(a).then((ok)=>{
           if(ok){
             alert("验证码发送成功");
           }
           else{
             alert("手机号错误请重新输入")
           }
       }) 
  },
  zm(){
    this.$router.push("/zm");
  }
}
}
</script>

<style scoped>
@import "/Iconlibrary/iconfont.css";
body,html{
  width: 100%;
  height: 100%;
}
.yanzheng{
  width: 2rem;
  height: .5rem;
  position: relative;
  left: 1rem; 
}
.wrap{
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-direction: column; */
}
header{
  width: 100%;
  height: 0.37rem;
}
header .x{
   font-size: 0.18rem;
   margin: 0 0.1rem;
   line-height: 0.37rem;
}
section{
  flex: 1;
}
.tp{
  width: 100%;
  height: 0.9rem;
   text-align: center;
  
}
.tp img{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin: 0.2rem 0;
}
.log{
  width: 100%;
  height: 0.4rem;
  font-size: 0.09rem;
  text-align: center;
  font-weight: 600;
}
.tell{
  width: 100%;
  height: 0.95rem;
  text-align: center;
  line-height: 0.95rem;
  font-size: 0.2rem;
}
.tell input{
  line-height: 0.5rem;
  width: 2.5rem;
  height: 0.5rem;
  border: none;
  border:1px solid gray;
  /* background-color: plum; */
}
.phone{
  width: 100%;
  height: 2.26rem;
}
.logn{
  width: 100%;
  height: 0.88rem;
  text-align: center;

}
.logn button{
    line-height: 0.47rem;
  width: 2.95rem;
  height: 0.47rem;
  border-radius: 0.05rem;
  color: white;
  background-color: black;
}
.lg{
  width: 100%;
  height: 0.88rem;
  text-align: center;
}
.lg button{
  width: 2.95rem;
  height: 0.47rem;
  border-radius: 0.05rem;
  color:black;
  background-color: white;
}
.quest{
  width: 100%;
  height: 0.88rem;
  font-size: 0.06rem;
  color: #cccc;
  position: relative;
  left: 2.8rem;
  top: -0.35rem;
}
footer{
  height: 1.6rem;
}
.foot{
  width: 100%;
  height: 0.97rem;
}
.foot>span{
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  margin-left: 0.1rem;
 
}
.foot>span img{
   margin: 0.3rem 0.180rem;
}
.end{
  width: 100%;
  height: 0.7rem;
}
.end p{
  margin: 0.12rem 0;
  font-size: 0.06rem;
  text-align: center;
}
.end p span{
  color: #83bbcb;
}
    
</style>